/*
 * @Author: Zeratul
 * @Date: 2020-08-21 16:51:10
 * @LastEditTime: 2020-08-28 14:24:11
 * @FilePath: \sz-h5-2003-react-mobile\zhangminhui\eleme-react\eleme-user\src\components\BottomNav\index.js
 */
import React, { Component } from "react";
import { TabBar } from "antd-mobile";

import { withRouter } from "react-router-dom";
import "./index.scss";

class BottomNav extends Component {

  render() {
    return (
      <div
        style={{ position: "fixed", height: "100%", width: "100%", top: 0} }
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-icon-test"></use>
              </svg>
            }
            selectedIcon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-Eleme"></use>
              </svg>
            }
            selected={this.props.location.pathname === "/"}
            onPress={() => {
              this.props.history.push("/");
            }}
            data-seed="logId"
          >
            {this.props.children}
          </TabBar.Item>

          <TabBar.Item
            title="发现"
            key="discover"
            icon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-faxian1"></use>
              </svg>
            }
            selectedIcon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-faxian"></use>
              </svg>
            }
            selected={this.props.location.pathname === "/discover"}
            onPress={() => {
              this.props.history.push("/discover");
            }}
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            title="订单"
            key="order"
            icon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-dingdan"></use>
              </svg>
            }
            selectedIcon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-bill"></use>
              </svg>
            }
            selected={this.props.location.pathname === "/order"}
            onPress={() => {
              this.props.history.push("/order");
            }}
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            title="我的"
            key="user"
            icon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-wode"></use>
              </svg>
              // <i className="iconfont icon-wode"></i>
            }
            selectedIcon={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-wode1"></use>
              </svg>
            }
            selected={this.props.location.pathname === "/user"}
            onPress={() => {
              this.props.history.push("/user");
            }}
            data-seed="logId1"
          >
            {this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(BottomNav);
